import React, { Component } from "react";
import Child from "./Child";
import Child2 from "./Child2";
import Child3 from "./Child3";

/*
src/components 全局的header footer等
*/
/*
export 与export default

constructor 
  this.state bind this
  如果有本地缓存可以直接进行获取
  loc || ''

render
  页面渲染发源地
  执行两次
    正常都需要判断第一次过滤掉obj arr

生命周期
  三阶段
  ajax 可在DidMount和Update中执行
  如果在Update中执行需要考虑符合条件，要不然一直执行
  Willunmount 一般做取消订购 清定时器 取消中止ajax
  企业面试题：如果当前组件ajax 未执行完成时，用户操作了其他组件这时候会报错，数据问题，如何处理？ 在Willunmount中取消或中止ajax或把数据进行还原
  除了DidMount中请求ajax 还可以在那个方法中执行需要？Update

state
  当前页面有关 两种setState方法
  箭头函数 return

props
  父组件 传值



*/
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      name: "1",
    };
    // state 初始化
    // this 绑定
  }
  setState() {
    this.setState({
      page: 2,
    });
    this.setState({
      name: "12",
    });
    this.setState({
      page: this.state.page++,
    });
    this.setState((state, props) => {
      return {
        page: state.page,
      };
    });
    this.setState(function (state, props) {
      return {
        page: state.page,
      };
    });
  }
  componentDidMount() {
    /* 
    生命周期
    三阶段：
    挂载阶段：constructor，render，componentDidMount
    更新阶段：static getDerivedStateFromProps，shouldComponentUpdate，componentDidUpdate，render
    销毁阶段：componentWillunmount 清除ajax请求，清除定时器
    render 写数据时都会增加判断，数组的长度 对象
    arr=[]; arr.length
    arr=[1,2,3]; 
    obj={} obj.a?<>:""
    obj={a:'1'} 
    */
  }
  callback(txt) {
    console.log(txt);
  }
  render() {
    const obj = {
      age: 12,
      name: "颜人中",
    };
    return (
      <React.Fragment>
        <div>lei</div>
        <div>lei</div>
        <Child name="父组件传的" />
        <Child obj={obj} />
        <Child {...obj} />
        <Child {...this.props} />
        <Child2 left={<Child />}>
          <b>这是b</b>
        </Child2>
        <Child2 />
        <Child3 callback={this.callback} />
      </React.Fragment>
    );
  }
}

export default index;
